<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .container {
      height: 150px;
      background-color: pink;
      margin: 0 auto;
    }
    /* 超小设备（手机） */
    @media screen and (max-width: 768px) {
      .container {
        width: 100%;
      }
    }
    /* 小型设备（平板电脑） */
    @media screen and (min-width: 768px) {
      .container {
        width: 750px;
      }
    }
    /* 中型设备（台式电脑） */
    @media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
    }
    /* 大型设备（大台式电脑） */
    @media screen and (min-width: 1200px) {
      .container {
        width: 1170px;
      }
    }
  </style>
  <body>
    <!-- 响应式开发里面，首先需要一个布局容器  -->
    <div class="container"></div>
  </body>
</html>
